<template>
  <div>
    <div class="label-value">
      <div class="label">标题</div>
      <div class="value">
        <el-input
          size="mini"
          v-model="viewModel.title"
          placeholder="请输入标题标题"
        />
      </div>
    </div>
    <div class="label-value">
      <div class="label">操作</div>
      <div class="value">
        <el-button size="small" @click="addTab">添加</el-button>
      </div>
    </div>
    <div
      class="tabs"
      v-for="(item, index) in viewModel.editableTabs"
      :key="index"
    >
      <div class="title">选项卡{{ index + 1 }}</div>
      <div class="label-value">
        <div class="label">名称</div>
        <div class="value">
          <el-input size="mini" v-model="item.title" />
        </div>
      </div>
      <div class="label-value">
        <div class="label">类型</div>
        <div class="value">
          <el-select
            v-model="item.type"
            placeholder="请选择"
            size="mini"
            @change="changeType(item)"
          >
            <el-option label="标签页" value="0"></el-option>
            <el-option label="视图" value="1"></el-option>
          </el-select>
        </div>
      </div>
      <div class="label-value">
        <div class="label">模块</div>
        <div class="value">
          <el-select
            v-model="item.module"
            placeholder="请选择"
            size="mini"
            @change="changeModule(item)"
          >
            <el-option
              v-for="item in moduleData"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "TabConfig",
  components: {},
  props: ["currCfg"],
  data() {
    return {
      moduleData: [],
    };
  },
  computed: {
    viewModel() {
      console.log("this.currCfg", this.currCfg);
      return this.currCfg.config;
    },
  },
  methods: {
    addTab() {
      ++this.viewModel.tabIndex;
      this.viewModel.editableTabs.push({
        key: Date.now(),
        title: "Tab " + this.viewModel.tabIndex,
        name: String(this.viewModel.tabIndex),
        type: "",
        module: "",
        content: "",
      });
    },
    changeType(item) {
      //   重新发起请求获取数据
      let arr = [
        {
          label: "表单",
          value: "0",
        },
        {
          label: "视图",
          value: "1",
        },
      ];
      this.moduleData = arr;
    },
    changeModule(item) {
      this.viewModel.editableTabs.map((item1) => {
        if (item1.key == item.key) {
          if (item.module == "0") {
            item1.content = "<p>1111</p><h1>ppp</h1>";
          } else {
            item1.content =
              "<table><tr><th>111</th><th>222</th></tr><tr><td>333</td><td>444</td></tr></table>";
          }
        }
      });
    },
  },
  mounted() {},
};
</script>,
<style lang="scss" scoped>
.tabs {
  box-sizing: border-box;
  .title{
      padding: 10px;
      font-weight: bolder;
  }
  .label-value {
      margin-bottom: 15px;
    .label {
      display: inline-block;
      width: 20%;
    }
    .value {
      display: inline-block;
      width: 80%;
    }
  }
}
</style>
